<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useEcharts } from '@/hooks/common/echarts';
import { statsLoginLogs } from '@/service/api/log/loginLog';
import type { LoginLogstats, LogingLogstatsVo } from '@/service/types/log';
const range = ref(null);
defineOptions({
  name: 'BarChart'
});
const { domRef, updateOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    left: '5%',
    right: '5%',
    bottom: '10%',
    containLabel: true // 包含标签
  },
  legend: {
    top: '0%',
    right: '5%',
    itemStyle: {
      borderWidth: 0
    }
  },
  xAxis: [
    {
      type: 'category',
      axisPointer: {
        type: 'shadow'
      }
    },
    {
      type: 'category',
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      splitArea: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      axisLabel: {
        show: false
      }
    },
    {
      type: 'value',
      name: '',
      axisLabel: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '登录成功',
      type: 'bar',
      color: '#227eff'
    },
    {
      name: '登录失败',
      type: 'bar',
      color: '#f62d38'
    }
  ]
}));
// function updateLocale() {
//   updateOptions((opts, factory) => {
//     // const originOpts = factory();

//     // opts.series[0].name = originOpts.series[0].name;

//     // opts.series[0].data = [
//     //   { name: $t('page.home.study'), value: 20 },
//     //   { name: $t('page.home.entertainment'), value: 10 },
//     //   { name: $t('page.home.work'), value: 40 },
//     //   { name: $t('page.home.rest'), value: 30 }
//     // ];

//     return opts;
//   });
// }
async function getLoginLogsStats(params = {}) {
  const data = (await statsLoginLogs(params).then((res: any) => {
    return Promise.resolve(res?.data.data);
  })) as unknown as LogingLogstatsVo;
  const success = [] as Array<string>;
  const errors = [] as Array<string>;
  // eslint-disable-next-line array-callback-return
  data.logs.map((item: LoginLogstats) => {
    success.push(item.success);
    errors.push(item.error);
  });
  updateOptions(opts => {
    opts.xAxis[0].data = data.deteFields;
    opts.xAxis[1].data = data.deteFields;
    opts.series[0].data = success;
    opts.series[1].data = errors;
    return opts;
  });
}
async function init() {
  getLoginLogsStats();
}

// watch(
//   () => appStore.locale,
//   () => {
//     updateLocale();
//   }
// );

init();
const handleChange = (value: any) => {
  let params = {};
  if (value) {
    params = {
      startDate: value[0],
      endDate: value[1]
    };
  }
  // console.log(value);
  getLoginLogsStats(params);
};
</script>

<template>
  <NCard title="登录统计" :bordered="false" class="card-wrapper" content-class="p-0" content-style="padding:0px">
    <template #header-extra>
      <NDatePicker
        v-model:value="range"
        size="small"
        type="daterange"
        clearable
        @update:formatted-value="handleChange"
      />
    </template>
    <div ref="domRef" class="h-250px overflow-hidden"></div>
  </NCard>
</template>

<style lang="scss" scoped></style>
